<template>
	<view>
		<view class="head-content">
             <!-- #ifdef MP-WEIXIN --> 
			<top-nav :inner-title="title" is-show-back="true" is-fixed="false" :navH="navH" :n="n" is-white="bg-white" opacity="1"></top-nav>
            <!-- #endif -->
			<view class="search flex">
				<view class="search-item flex">
                    <image src="http://juhuijia2.birdback.org/mapi/i/run/search@3x.png"></image>
                    <input value="searchData" type="text" :focus="focusSearch" :placeholder="holderData ? holderData:'输入商家、商品名称'" v-model="searchData" @input="inputChange" @confirm="inputSearchChange(searchData)"></input>
                    <image src="http://img1.birdback.org/a/4f/92/4f92e01ba5f5e03080c6dc54fb2277f3.png" class="empty_close" v-if=" searchData != '' " @click="emptyInput()" ></image>
				</view>
                <view class="search_text" @click="inputSearchChange(searchData)">搜索</view>
			</view>
		</view>
         <!-- #ifdef MP-WEIXIN --> 
         <view class="box" :style='{height: navH+48 + "px"}'></view>
         <!-- #endif -->
         <!-- #ifdef MP-ALIPAY -->
         <view class="box" :style='{height: 48 + "px"}'></view>
         <!-- #endif -->
		
		<block v-if="!showList">
			<view class="tags" v-if="historyList.length>0">
				<view class="tags-header">
					<text>历史搜索</text>
					<image @click="deleteHistory()" src="http://img1.birdback.org/a/13/c7/13c7ada4ea216d4d4563e9a951fdde3e.png"></image>
				</view>
				<view class="tags-list">
					<block v-for="(item,index) in historyList" :key="index">
						<view :class="searchData == item && isButtonSearch ?'active':''" @click="buttonSearch(item)">{{item}}</view>
					</block>
				</view>
			</view>
			<view class="tags" v-if="hotList.length>0">
				<view class="tags-header">
					<text>热门搜索</text>
					<view></view>
				</view>
				<view class="tags-list">
					<block v-for="(item,index) in hotList" :key="index">
						<view :class="searchData == item && isHotSearch ?'active':''" @click="hotSearch(item)">{{item}}</view>
					</block>
				</view>
			</view>
		</block>
		<block v-else>
			<block v-if="!isEmpty">
                <view class="shop_list_content">
                    <block v-for="(item,index) in shopInfoList" :key="item.id">
                        <view @click='openStore(item.id)' class="shop-list-item">
                            <view class="shop-info-left">
                                <block v-if='item.disable && item.reserve_status != 1'>
                                    <view class='close'></view>
                                </block>
                                <block  v-if="item.type == 1">
                                    <view class='big_brand'></view>
                                </block>
                                <block v-if="item.new_store ==  1">
                                    <view class='new_store'></view>
                                </block>
                                <image class="shop-info-img" :src="item.shop_img"></image>
                            </view>
                            <view class="shop-info-detail">
                                <view class="shop-info-detail-name">
                                    {{item.shop_name}}
                                </view>
                                 <view class="shop-info-detail-middle" v-if="item.reserve_status == 1 && item.disable != 0">
                                    <view class="reser_icon">接受预定中</view>
                                </view>
                                <view class="shop-info-detail-middle"> 
                                    <view class="shop-info-detail-other flex">
                                        <view class="flex store_score">
                                            <block v-if="item.star>0">
                                                <icon class="star_icon star_yellow"></icon>
                                                <text class="yellow_text">{{item.star}}</text>
                                            </block>
                                            <block v-else>
                                                <icon class="star_icon star_gray"></icon>
                                                <text class="light_text">暂无评分</text>
                                            </block>
                                        </view>
                                        <text v-if="item.month_order">月售{{item.month_order}}</text>
                                        
                                    </view>
                                    <view class="shop-info-detail-sales"> 
                                      <image class="distribution_icon_1" v-if="item.distribution_type == 1" src="http://img1.birdback.org/a/8c/8b/8c8b937c206a0677589501a003c96123.png"></image>
                                    <!-- <block wx:if='{{item.icon_tag_url != ""}}'>
                                        <image class="icon-tag" src="{{item.icon_tag_url}}"></image>
                                    </block> -->
                                </view>
                                </view>
                                <view class="shop-info-detail-middle">
                                    <view class="shop-info-detail-other">
                                        <text>起送 ￥{{item.start_send_price}}</text>
                                        <text>配送 ￥{{item.send_price}}</text>
                                    </view>
                                    <!-- <view class="shop-info-detail-sales">
                                        月销{{item.month_order}}笔
                                    </view> -->
                                </view>

                                <view class='shop-tags'>
                                    <block v-for='(val,index) in item.active_list' :key='index'>
                                        <view>
                                            <icon :class='val.type'></icon>
                                            <text>{{val.text}}</text>
                                        </view>
                                    </block>
                                </view>
                            </view>
                        </view>
                        <block v-if="item.goods_list.length > 0">
                            <view class="shop-list-content" :style='{height: item.height + "px"}'>
                                <view class="shop-goods-list">
                                    <block v-for="(item,index) in item.goods_list" :key="index">
                                        <view class="goods-list">
                                            <view class="goods-right">
                                                <text>{{item.name}}</text>
                                                <text>￥{{item.price}}</text>
                                            </view>
                                        </view>
                                    </block>
                                </view>
                            </view>
                            <block v-if="item.goods_list.length - 1 > 0">
                                <view class="animateButton" @click="animateEvent(index)">
                                    <text>{{ isCk[index] ? '收起' : '展开' }}其他{{item.goods_list.length - 1}}个商品</text>
                                </view>
                            </block>
                        </block>
                        <view class="box"></view>
                    </block>
                </view>
                    <view class="no-more" v-if="noMore">没有更多了哦</view>
			</block>
			<block v-else>
				<view class="empty">
					<image src="http://juhuijia2.birdback.org/mapi/i/home/ku@3x.png"></image>
					<text>抱歉，未能找到您搜索的商家或商品</text>
				</view>
			</block>
		</block>
	</view>
</template>
<script>
	import uniFly from 'unifly';
	import request from '../../common/request.js';
	import $api_base from '../../api/api_base.js';
	import topNav from '@/template/topnav/index.vue';
	export default {
		components: { topNav },
		data() {
			return {
				isEmpty: true,
                focusSearch: true,
				searchData: '',
                holderData:'',
				showList: false,
				shopInfoList: [],
				animationData: [],
				isCk: [],
				isButtonSearch: false,
				isHotSearch: false,
                historyList: [],
				hotList: [],
				menuId: 0,
				navH: 0,
				n:0,
				title: '同学快跑',
				noMore: false,
				animateHeight: 41
			}
		},
		onLoad(options){
			var val = options.val || '';
			var schoolId = getApp().globalData.schoolInfo.id;
			var menuId = options.menuId || 0;
			var self = this;
			this.navH = getApp().globalData.navHeight; 
			this.n = getApp().globalData.n; 
			this.menuId = menuId;
			//if(val != ''){
				self.holderData = val;
			//}else{
				this.loadKeys();
			//}
		},
		onShow(optons){
			
		},
		methods:{
			loadKeys:function(){
				let self = this;
				let schoolId = getApp().globalData.schoolInfo.id;
				let params = {
					school_id: schoolId
				}
				let history = uni.getStorageSync('HISTORY_SEARCH') || "[]";
				this.historyList = JSON.parse(history);
				$api_base.post($api_base.storeSearchInit,params).then(function(res) {
					let data = res.data;
					if (data.ok == 1) {
						self.hotList = data.hot_list
					}
				});
			},
			openStore: function (e) {
				var storeId = e;
				uni.navigateTo({
					url: '/pages/goods/goods?storeId=' + storeId + '&sid=index',
				})
			},
			emptyInput: function () {
				this.searchData      = ""; 
				this.showList        = false;
				this.searchGoodsList = [];
				this.isButtonSearch  = false; 
				this.isHotSearch     = false;
				this.focusSearch     = true;
				this.loadKeys();
			},
			buttonSearch: function (e) {
				var m = e;
				var self = this;
				this.searchData     = m; 
				this.isHotSearch    = false;
				this.isButtonSearch = true; 
				this.focusSearch    = false;
				setTimeout(function () {
					self.loadData();
				});
			},
			hotSearch: function (e) {
				var m = e;
				var self = this;
				this.searchData     = m; 
				this.isHotSearch    = true; 
				this.isButtonSearch = false; 
				this.focusSearch    = false;
				setTimeout(function () {
					self.loadData();
				});
			},
			deleteHistory: function () {
				uni.removeStorageSync('HISTORY_SEARCH');
				var history = uni.getStorageSync('HISTORY_SEARCH') || "[]";
				this.historyList = JSON.parse(history);
			},
			animateEvent: function (e) {
				var shopInfo = this.shopInfoList;
				var idx      = e;
				var isCk     = this.isCk;
				var animateHeight = this.animateHeight;
			
				if (isCk[idx]) {
					animateHeight = 42;
					isCk[idx] = false;
				} else {
					var num = shopInfo[idx].goods_list.length || 0;
					animateHeight = num * 42;
					isCk[idx] = true;	
				}
				this.isCk = isCk;
				this.shopInfoList[idx].height = animateHeight;
			},
            inputChange: function(e){
                var self = this;
                self.searchData = e.detail.value;
                if(e.detail.value.length==0){
                    self.searchData     = "";
                    self.showList       = false;
                    self.isButtonSearch = false;
                    self.isHotSearch    = false;
                    self.shopInfoList   = [];
                }
            },
			inputSearchChange: function (e) {
                let holderData = this.holderData;
				var value = e ? e : holderData;
				var len   = value.length;
				var self  = this;
                
				if (value.trim() != "" && len > 0) {
					self.searchData = value.trim();
					(function (len) {
							var value = self.searchData;
							if (len == value.length && len > 0) {
								self.searchData = value;
								self.loadData();
							}
					}(len));
				} else {
					self.searchData     = ""; 
					self.showList       = false;
					self.isButtonSearch = false;
					self.isHotSearch    = false;
				}
			},
			loadData: function () {
				let schoolId = getApp().globalData.schoolInfo.id;
				let searchData = this.searchData;
                
				let menuId = this.menuId;
				let self = this;
				let params = {
					school_id: schoolId, 
					menuId:menuId,
					search_data: searchData
				};
				$api_base.post($api_base.storeSearch,params).then(function(res) {
					let data = res.data;
					if (data.ok == 1) {
						let list = data.list || [];
						let isEmpty = (list.length) === 0 ? true : false;
						list.forEach((item, index, arr) => {
							item.height = 42;
						})
						self.shopInfoList = list; 
						self.showList = true;
						self.isEmpty = isEmpty;
						//if (!isEmpty && !self.isHotSearch) self.setHistory(searchData);
                        if (!isEmpty) self.setHistory(searchData);
					}
				});
			},
			setHistory: function (searchData) {
				let a = uni.getStorageSync('HISTORY_SEARCH') || "[]";
				let b = JSON.parse(a);
				let c = -1;
				for (let d in b) {
					if (b[d] === searchData) {
						c = d;
						break;
					}
				}
				if (c > -1) {
					b.splice(c, 1);
				}
				if (b.length >= 10) {
					b.splice(10, 1);
				}
				b.unshift(searchData);
				uni.setStorageSync('HISTORY_SEARCH', JSON.stringify(b));
				this.historyList = b;
			},
		  
			/**
			 * 页面相关事件处理函数--监听用户下拉动作
			 */
			onPullDownRefresh: function () {
				uni.stopPullDownRefresh();
			},
			/**
			 * 页面上拉触底事件的处理函数
			 */
			onReachBottom: function () {
			  this.noMore = true;
			},
		}
	}
</script>
<style>
  page {
  background-color: #fff;
  }
</style>
<style lang="scss" scoped>
	@import 'index.scss';
</style>
